<template>
    <div class="login">
        <AppModal v-model:show="visible">
            <button @click="visible = false">关闭</button>
        </AppModal>
        <div @click="open()">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>

/**
 * 登录弹窗组件
 */

import { login } from "@/api";
import { useUserStore } from "@/stores";

const emit = defineEmits(['close'])

const userStore = useUserStore()

const form = ref({
    username: '',
    password: ''
})

async function submit() {
    const { username, password } = form.value
    const res = await useFetch('/api/login', {
        method: 'POST',
        body: {
            username,
            password
        }
    })
    if (res.code !== Code.success) {
        return console.error(res.msg)
    }
    const { accessToken } = res.data
    userStore.setAccessToken(accessToken)
}

const visible = ref(false)

/**打开弹窗 */
function open() {
    visible.value = true
}

/**关闭弹窗 */
function close() {
    visible.value = false
}
</script>

<style lang='scss' scoped>
.box {
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
}
</style>